<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>


    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />

	<!--  THIS IS MY FIRST ATTEMPT AT EXT!
			THIS MAY NOT BE THE MOST OPTIMAL WAY OF DOING THINGS.
			PROBABLY THERE IS WAY TO FIGURE OUT THE JS DEPENDANCIES.
			NEED TO LEARN MORE!
			
			ORDER OF JS FILES IS IMPORTANT!! -->    
    <script type="text/javascript" src="extjs/core/Ext-min.js"></script>
    <script type="text/javascript" src="extjs/util/Observable-min.js"></script>
    <script type="text/javascript" src="extjs/adapter/ext-base-min.js"></script>
    <script type="text/javascript" src="extjs/core/EventManager-min.js"></script>
    <script type="text/javascript" src="extjs/core/DomQuery-min.js"></script>
    <script type="text/javascript" src="extjs/core/Element-min.js"></script>
    <script type="text/javascript" src="extjs/core/DomHelper-min.js"></script>
    <script type="text/javascript" src="extjs/util/MixedCollection-min.js"></script>
    <script type="text/javascript" src="extjs/util/DelayedTask-min.js"></script>
    <script type="text/javascript" src="extjs/core/EventManager-min.js"></script>
    <script type="text/javascript" src="extjs/core/Template-min.js"></script>
    <script type="text/javascript" src="extjs/widgets/ComponentMgr-min.js"></script>
    <script type="text/javascript" src="extjs/widgets/Component-min.js"></script>
    <script type="text/javascript" src="extjs/widgets/BoxComponent-min.js"></script>
    <script type="text/javascript" src="extjs/widgets/Container-min.js"></script>
    <script type="text/javascript" src="extjs/widgets/Panel-min.js"></script>
    <script type="text/javascript" src="extjs/widgets/TabPanel-min.js"></script>
    <script type="text/javascript" src="extjs/widgets/layout/ContainerLayout-min.js"></script>
    <script type="text/javascript" src="extjs/widgets/layout/FitLayout-min.js"></script>
    <script type="text/javascript" src="extjs/widgets/layout/CardLayout-min.js"></script>
    
    
    <script type="text/javascript" src="extjs-showcase.js"></script>

<title>Main Page - EXT-JS capabilities</title>

<style type="text/css">
@import "customJs/dhtmlgoodies-menubar/menu.css";
@import "extjs-showcase.css";
</style>

<script type="text/javascript" src="customJs/dhtmlgoodies-menubar/menu.js"></script>

</head>
<body>
<div id="libChooser" style="min-height: 110px;">
<ul>
	<li class="bounce"><span class="fisheyeTarget">Dojo</span><br />
	<div class="ilk">core js utilities, loads of widgets</div>
	</li>
	<li class="bounce"><span class="fisheyeTarget">Ext-JS</span><br />
	<div class="ilk">Out of box Eye Candy UI, pluggable, customizable</div>
	</li>
	<li class="bounce"><span class="fisheyeTarget">JQuery</span><br />
	<div class="ilk">Extremely compact, pluggable, microsoft endorsed</div>
	</li>
	<li class="bounce"><span class="fisheyeTarget">mootools</span><br />
	<div class="ilk">Flashy and compact library</div>
	</li>
	<li class="bounce"><span class="fisheyeTarget">prototype</span><br />
	<div class="ilk">Hugely popular, compact, UI using scriptaculous</div>
	</li>
	<li class="bounce"><span class="fisheyeTarget">yui</span><br />
	<div class="ilk">Pluggable, documented, lot of utilities and widgets</div>
	</li>
</ul>
</div>
<div style="clear: both;"></div>
<div id="menuBar">
<div id="dhtmlgoodies_menu">
<ul>
	<li><a href="http://www.dhtmlgoodies.com">ExtJS Form Components</a>
	<ul>
		<li><a href="http://www.dhtmlgoodies.com">Radio</a></li>
		<li><a href="http://www.dhtmlgoodies.com">Check Boxes</a></li>
		<li><a href="http://www.dhtmlgoodies.com">Validating Textbox</a></li>
		<li><a href="http://www.dhtmlgoodies.com">Text Area</a></li>
		<li><a href="http://www.dhtmlgoodies.com">Inline Editable labels</a></li>
		<li><a href="http://www.dhtmlgoodies.com">Editable Dropdowns</a></li>
		<li><a href="http://www.dhtmlgoodies.com">Tooltips</a></li>
	</ul>
	</li>
	<li><a href="http://www.dhtmlgoodies.com">ExtJS Complex Widgets</a>
	<ul>
		<li><a href="http://www.dhtmlgoodies.com">Tabs</a></li>
		<li><a href="http://www.dhtmlgoodies.com">Tree</a></li>
		<li><a href="http://www.dhtmlgoodies.com">Data Tables</a></li>
		<li><a href="http://www.dhtmlgoodies.com">Calendar</a></li>
		<li><a href="http://www.dhtmlgoodies.com">Progress Bar</a></li>
		<li><a href="http://www.dhtmlgoodies.com">Modal Dialog</a></li>
	</ul>
	</li>
	<li><a href="http://www.dhtmlgoodies.com">Fancy Stuff using ExtJS</a>
	<ul>
		<li><a href="http://www.dhtmlgoodies.com">Accordian</a></li>
		<li><a href="http://www.dhtmlgoodies.com">Drag-N-Drop</a></li>
		<li><a href="http://www.dhtmlgoodies.com">Animations</a></li>
		<li><a href="http://www.dhtmlgoodies.com">Image Manipulation</a></li>
		<li><a href="http://www.dhtmlgoodies.com">Color Chooser</a></li>
	</ul>
	</li>
	<li><a href="http://www.dhtmlgoodies.com">AJAX Interaction using ExtJS</a></li>
	<li><a href="http://www.dhtmlgoodies.com">PHD Topics</a>
	</li>
	<li><a href="http://www.dojotoolkit.org">More Help about ExtJS</a>
	</li>
</ul>
</div>

</div>
<div id="contentArea">The Content Area
    <div id="MainTabContainer">
        <div id="extFormComponents" class="x-hide-display">
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus.<br/><br/> Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna.</p>
        </div>

        <div id="extComplex" class="x-hide-display">
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus. Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna.<br/><br/>Aliquam commodo ullamcorper erat. Nullam vel justo in neque porttitor laoreet. Aenean lacus dui, consequat eu, adipiscing eget, nonummy non, nisi. Morbi nunc est, dignissim non, ornare sed, luctus eu, massa. Vivamus eget quam. Vivamus tincidunt diam nec urna. Curabitur velit.</p>
        </div>
        
        <div id="extFancy" class="x-hide-display">
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus. Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna.<br/><br/>Aliquam commodo ullamcorper erat. Nullam vel justo in neque porttitor laoreet. Aenean lacus dui, consequat eu, adipiscing eget, nonummy non, nisi. Morbi nunc est, dignissim non, ornare sed, luctus eu, massa. Vivamus eget quam. Vivamus tincidunt diam nec urna. Curabitur velit.</p>
        </div>
        
    </div>
</div>
<div id="teaserArea">The Teaser Area</div>
<div id="statusBar"></div>
<div style="clear: both;"></div>

</body>
</html>
